<template>
  <div class="form-contain">
    <div class="dashboard-addnav">
     <el-button type="primary" @click="modelShow = true" size="small">添加导航</el-button>
     <div style="color:#aaaaaa;font-size:14px;margin-top:10px;">最多添加8个导航，建议添加4个、6个或8个(建议使用85*85像素的图片)</div>
    </div>
    <!-- 导航表格 -->
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="navigate_name"
          label="导航名称"
          width="320">
        </el-table-column>
        <el-table-column
          label="导航图标"
          width="320">
          <template slot-scope="scope">
            <img :src="scope.row.navigate_img" alt="" srcset="" style="width:60px;height:60px;">
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作">
          <template slot-scope='scope'>
            <el-button @click="editNav(scope.row)" type="primary" size="mini">编辑</el-button>
            <el-button @click="deleteNavigate(scope.row.id)" type="primary" size="mini">删除</el-button>
            <el-button @click="jumpNavigate(scope.row.id)" type="primary" size="mini">完善</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="modelShow" :before-close="restModel">
      <div>
        <span><span style="color:rgb(229, 28, 35)">*</span>导航名称</span>
        <el-input
        :maxlength="4"
        v-model="form.navigate_name"
        placeholder="不能超过4个字符"
        style="width:240px;margin-left:20px"></el-input>
      </div>
      <div>
        <span><span style="color:rgb(229, 28, 35)">*</span>导航图标</span>
        <img-upload :imgFile='form' name='navigate_img' style='margin-top: 20px'></img-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modelShow = false">取 消</el-button>
        <el-button type="primary" @click.stop="addNav">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload'
import { getNavigate, delNavigate, addNavigate } from '@/api/navs'

export default {
  components: {
    ImgUpload
  },
  data () {
    return {
      modelShow: false,
      tableData: [],
      nav_id: null,
      form: {
        navigate_name: '',
        navigate_img: ''
      }
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    addNav () {
      let reg = /^([\u4e00-\u9fa5]){1,4}$/
      if (reg.test(this.form.navigate_name)) {
        let params = this.nav_id ? {...this.form, id: this.nav_id} : this.form
        addNavigate(params).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '导航添加成功！'
            })
          } else if (res.code === 2) {
            this.$message({
              type: 'success',
              message: '导航更新成功！'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
          this.form = {
            navigate_name: '',
            navigate_img: ''
          }
          this.loadList()
          this.modelShow = false
        })
      } else {
        this.$message({
          type: 'warning',
          message: '导航只能为中文！'
        })
      }
    },
    restModel (done) {
      this.nav_id = null
      this.form = {
        navigate_name: '',
        navigate_img: ''
      }
      done()
    },
    editNav (row) {
      this.nav_id = row.id
      this.form = {
        navigate_name: row.navigate_name,
        navigate_img: row.navigate_img
      }
      this.navigate_name = row.navigate_name
      this.modelShow = true
    },
    deleteNavigate (id) {
      this.$confirm('此操作将删除导航, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delNavigate({
          id: id
        })
      }).then((res) => {
        if (res.code === 1) {
          this.$message({
            type: 'success',
            message: '导航已删除!'
          })
          this.loadList()
          this.modelShow = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadList () {
      getNavigate().then((res) => {
        if (res.code === 1) {
          this.tableData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    jumpNavigate (id) {
      this.$router.push({path: 'editNav', query: {nav_id: id}})
    }
  }
}
</script>
<style lang="less">
  .dashboard-addnav{
    margin-bottom: 30px;
  }
</style>
